<template>
  <div class="params">
    <qwerty title1='商品管理' title2='分类参数'></qwerty>
    <el-card style="margin-top:20px">
      <el-tag type="warning"><i class="el-icon-question"></i> 注意：只允许为第三级分类设置相关参数！</el-tag>
      <el-form style="margin-top:20px"  label-width="120px">
        <el-form-item label="选择商品分类：">
           <el-cascader
           :props='cascaderProps'
            v-model="value"
            :options="options"
            @change="handleChange">
            </el-cascader>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="动态参数" name="many">
      <el-button type="primary" size="mini" :disabled="isBtn" @click="add">添加</el-button>
      <el-table
        :data="manyTableData"
        stripe
        style="width: 100%">
        <el-table-column type="expand">
        
          <template slot-scope="scope">
            <el-tag
            :key="index"
            v-for="(tag,index) in scope.row.attr_vals"
            closable
            :disable-transitions="false"
            @close="handleClose(index,scope.row)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="scope.row.inputVisible"
            v-model="scope.row.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(scope.row)"
            @blur="handleInputConfirm(scope.row)"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
          </template>
        </el-table-column>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column
          prop="attr_name"
          label="参数名称">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
             <el-button type="primary"
                         icon="el-icon-edit"
                         size="mini"
                         @click="handleEdit(scope.row)">
                        </el-button>
          <el-button type="danger"
                         icon="el-icon-delete"
                         size="mini"
                         @click="handleDelete(scope.row)">
                        </el-button> 
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="静态属性" name="only">
      <el-button type="primary" size="mini" :disabled="isBtn" @click="add">添加</el-button>
      <el-table
        :data="onlyTableData"
        stripe
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-tag
            :key="index"
            v-for="(tag,index) in scope.row.attr_vals"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="scope.row.inputVisible"
            v-model="scope.row.inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm(scope.row)"
            @blur="handleInputConfirm(scope.row)"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
          </template>
        </el-table-column>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column
          prop="attr_name"
          label="参数名称">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
             <el-button type="primary"
                         icon="el-icon-edit"
                         size="mini"
                         @click="handleEdit(scope.row)">
                        </el-button>
          <el-button type="danger"
                         icon="el-icon-delete"
                         size="mini"
                         @click="handleDelete(scope.row)">
                        </el-button> 
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
   </el-tabs>
    </el-card>
    <el-dialog
  :title="'添加'+titleText"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>
    <el-form :model="ruleForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="动态参数" prop="attr_name">
         <el-input v-model="ruleForm.attr_name"></el-input>
       </el-form-item>
     </el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSub('addForm')">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  :title="'修改'+titleText"
  :visible.sync="dialogVisible2"
  width="30%"
  :before-close="handleClose">
  <span>
    <el-form :model="ruleForm" :rules="rules" ref="updateForm" label-width="100px" class="demo-ruleForm">
       <el-form-item label="动态参数" prop="attr_name">
         <el-input v-model="ruleForm.attr_name"></el-input>
       </el-form-item>
     </el-form>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="updateSub('updateForm')">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {getCate,getCateParams,addParams,updateParams} from '@/api/params'
export default {
    name:'params',
    computed:{
      titleText(){
        if(this.activeName==='many'){
          return '动态参数'
        }
        return '静态属性'
      },
      isBtn:function(){
        // if(this.id.length!==3){
        //   return true;
        // }
        return false
      }
    },
    data(){
      return{
        attr_vals:[],
        attr_id:0,
        dialogVisible2:false,
         dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: '',
         ruleForm: {
          attr_name: '',
          attr_sel:''
        },
        rules: {
          attr_name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ]
        },
        dialogVisible:false,
        activeName: 'many',
        value: [],
        options: [],
        cascaderProps:{
          value:'cat_id',
          label:'cat_name',
          children:'children',
          expandTrigger: 'hover'
        },
        id:0,
        sel:'only',
        manyTableData:[],
        onlyTableData:[],
        // isBtn:true
      }
    },
    created(){
      this.selectCate();
      this.handleClick();
    },
    methods:{
      handleClose(i,row) {
       row.attr_vals.splice(i, 1);
       this.saveAttrVals(row);
      },

      showInput(row) {
        
        row.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      async handleInputConfirm(row) {
        if(row.inputValue.trim().length===0){
          row.inputValue=''
          row.inputVisible=false
          return
        }
        row.attr_vals.push(row.inputValue.trim());
        row.inputValue=''
        row.inputVisible=false
        this.saveAttrVals(row);
      },
      async saveAttrVals(row){
        var {data:res}=await updateParams(`categories/${row.cat_id}/attributes/${row.attr_id}`,{
              attr_name:row.attr_name,
              attr_sel:this.activeName,
              attr_vals:row.attr_vals.join(' ')
            })
            if(res.meta.status==200){
              this.$message.success(res.meta.msg);
            }
            this.dialogVisible2=false;
            // this.getParamsData();
      },
      add(){
        this.dialogVisible=true;
      },
      async addSub(addFrom){
         this.$refs[addFrom].validate(async (valid) => {
          if (!valid) return this.$message.error('请将选项输入完整！')
          
            var {data:res} = await addParams(`categories/${this.id}/attributes`,{
              attr_name:this.ruleForm.attr_name,
              attr_sel:this.activeName
            })
            if(res.meta.status==201){
              this.$message.success(res.meta.msg);
            }
            this.dialogVisible=false;
            this.getParamsData();
         })
      },
      async selectCate(){
        var {data:res}=await getCate();
        this.options=res.data
        console.log(this.options)
      },
      async getParamsData(){
        if(this.value.length!==3){
          this.manyTableData=[];
          this.onlyTableData=[];
          // this.isBtn=true;
          return;
        }
        var {data:res1}=await getCateParams(`categories/${this.id}/attributes?sel=`+this.activeName)
        res1.data.forEach(item=>{
          item.attr_vals=item.attr_vals?item.attr_vals.split(' '):[];
          item.inputVisible=false
          item.inputValue=''
        })
        if(this.activeName=='many'){
          this.manyTableData = res1.data
        }else{
          this.onlyTableData = res1.data
        }
      },
      async handleChange(value) {
        // this.isBtn=false;
        console.log(value);
        this.id=this.value[
          this.value.length-1
        ]
        this.getParamsData();
      },
      async handleClick() {
        this.handleChange();
      },
      async handleEdit(row){
        var {data:res} = await this.request.get
        (`categories/${row.cat_id}/attributes/${row.attr_id}`)
        this.attr_id=res.data.attr_id;
        this.ruleForm.attr_name=res.data.attr_name;
        this.attr_vals=res.data.attr_vals;
        this.dialogVisible2=true;
      },
      async updateSub(updateForm){
        this.$refs[updateForm].validate(async (valid) => {
          if (!valid) return this.$message.error('请将选项输入完整！');
          var {data:res}=await updateParams(`categories/${this.id}/attributes/${this.attr_id}`,{
              attr_name:this.ruleForm.attr_name,
              attr_sel:this.activeName,
              attr_vals:this.attr_vals
            })
            if(res.meta.status==200){
              this.$message.success(res.meta.msg);
            }
            this.dialogVisible2=false;
            this.getParamsData();
            this.editDialogVisible = false
        });
      }
    }
}
</script>

<style scoped>
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .el-cascader{
  width: 220px;
}
</style>